<template>
  <div>
    <slide-edit-toolbar v-if="!isPlay && !preview && !isCropImage"/>
    <slide-play-tool-bar v-if="(isPlay || preview) && !zoomImage.isZoom"/>
    <slide-zoom-tool-bar v-if="isPlay && zoomImage.isZoom"/>
    <image-resizer-tool-bar v-if="isCropImage"/>
  </div>
</template>

<script>
  import SlideEditToolbar from './SlideEditToolbar'
  import SlidePlayToolBar from './SlidePlayToolBar'
  import ImageResizerToolBar from './ImageResizerToolBar'
  import SlideZoomToolBar from './SlideZoomToolBar'
  import { mapState } from 'vuex'

  // let activeDom = null
  export default {
    name: 'SlideToolbar',
    components: {
      SlideEditToolbar,
      SlidePlayToolBar,
      ImageResizerToolBar,
      SlideZoomToolBar
    },
    data () {
      return {}
    },
    mounted: async function () {
    },
    // 计算表达式
    computed: {
      ...mapState({
        preview: state => state.slideEditor.preview,
        isPlay: state => state.slideEditor.isPlay,
        isCropImage: state => state.slideEditor.isCropImage,
        zoomImage: state => state.slideEditor.zoomImage
      })
    },
    methods: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
